import React  from 'react';
// 新生命周期02
class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = { favoritesite: "runoob" };
  }

  // componentDidMount() {
  //   setTimeout(() => {
  //     this.setState({ favoritesite: "google" });
  //   }, 1000);
  // }
/**
 * 主要用于在组件更新前获取快照信息。
 * @param {*} prevProps 更新前props 信息
 * @param {*} prevState 更新前state 信息
 * @returns 
 */
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("-----getSnapshotBeforeUpdate方法调用了-----")
    document.getElementById("div1").innerHTML = "在更新前喜欢的网站是: " + prevState.favoritesite;
    return prevState.favoritesite; // 返回快照信息，供 componentDidUpdate 使用
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("-----componentDidUpdate方法调用了-----")
    console.log(snapshot);
    document.getElementById("div2").innerHTML = "更新后喜欢的网站是: " + this.state.favoritesite;
  }

  render() {
    return (
      <div>
        <h1>我喜欢的网站是 {this.state.favoritesite}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
        <button onClick={()=>{
          this.setState({ favoritesite: "google" });
        }}> click</button>
      </div>
    );
  }
}
export default App;
